<template>
  <div>
    <div class="forgetpassword px-10 pt-10">
      <h3 class="mb-6">{{ $t('forgetpassword') }}</h3>
      <v-form ref="form" v-model="form.valid">
        <div class="view">
          <v-row align="center">
            <v-col cols="12" sm="4">
              <span class="title-text">
                {{ $t('email') }}
              </span>
            </v-col>

            <v-col cols="12" sm="8">
              <v-text-field
                v-model="form.email"
                dense
                :rules="emailRules"
                :label="$t('email')"
                :counter="320"
                type="email"
                required
                outlined
                persistent-hint
                :disabled="pending"
              >
                <span v-if="pending" slot="append" class="loading">
                  <span class="ml-1">{{ intervaltime }}</span>
                  <v-icon class="v-icon--spin">{{ icons.mdiLoading }}</v-icon>
                </span>
                <span v-else slot="append" class="loading">
                  <v-icon color="blue darken-2" :disabled="!form.email" @click.native="send">
                    {{ icons.mdiSend }}
                  </v-icon>
                </span>
              </v-text-field>
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col cols="12" sm="4">
              <span class="title-text">
                {{ $t('code') }}
              </span>
            </v-col>

            <v-col cols="12" sm="8">
              <v-otp-input v-model="form.email_code" :rules="codeRules" length="6" type="number" />
            </v-col>
          </v-row>

          <v-row align="center">
            <v-col cols="12" sm="4">
              <span class="title-text">
                {{ $t('newpassword') }}
              </span>
            </v-col>

            <v-col cols="12" sm="8">
              <v-text-field
                v-model="form.password"
                dense
                :label="$t('newpassword')"
                type="password"
                outlined
                persistent-hint
              />
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col cols="12" sm="4">
              <span class="title-text">
                {{ $t('confirmnewpassword') }}
              </span>
            </v-col>

            <v-col cols="12" sm="8">
              <v-text-field
                v-model="form.password2"
                dense
                :label="$t('confirmnewpassword')"
                :rules="passRules"
                type="password"
                outlined
                persistent-hint
              />
            </v-col>
          </v-row>
          <v-row no-gutters align="center" justify="center">
            <v-btn
              class="mt-5"
              elevation="2"
              rounded
              dark
              color="#E22129FF"
              style="text-transform: none"
              @click="submit"
            >
              {{ $t('submit') }}
            </v-btn>
          </v-row>
        </div>
      </v-form>

      <v-overlay :value="overlay">
        <v-alert
          class="mx-4"
          style="background-color: #ffffff !important"
          dense
          outlined
          prominent
          type="success"
        >
          {{ $t('thanksboard') }}
        </v-alert>
      </v-overlay>
      <v-snackbar v-model="tipShow" timeout="3000" centered>
        {{ tipTxt }}
      </v-snackbar>
    </div>
  </div>
</template>

<script>
import { mdiSend, mdiLoading } from '@mdi/js';

export default {
  name: 'CreateBoard',
  data() {
    return {
      icons: {
        mdiSend,
        mdiLoading
      },
      form: {
        email: '',
        email_code: '',
        password: '',
        password2: ''
      },
      intervaltime: 60,
      pending: false,
      showcode: false,
      overlay: false,
      tipShow: false,
      tipTxt: '',
      emailRules: [
        (v) => !!v || this.$t('require'),
        (v) => /.+@.+/.test(v) || this.$t('emialrule')
      ],
      codeRules: [(v) => !!v || this.$t('require')],
      passRules: [(v) => v === this.form.password || this.$t('needsame')]
    };
  },
  methods: {
    send() {
      this.pending = true;
      this.showcode = true;
      const time = setInterval(() => {
        this.intervaltime--;
        if (this.intervaltime <= 0) {
          this.pending = false;
          clearInterval(time);
        }
      }, 1000);
      this.$api.post('/user/sendReSetPwdEmailCode', this.form, { getAll: true }).then((res) => {
        if (res.code === 1) {
          console.log('发送成功');
          this.tipTxt = this.$t('sendsuccess');
          this.tipShow = true;
        } else {
          // this.tipTxt='发送失败,请检查手机号后重新发送'
          this.tipTxt = res.msg;
          this.tipShow = true;
          this.pending = false;
        }
      });
    },
    submit() {
      const res = this.$refs.form.validate();
      console.log(res);
      if (res) {
        this.$api.post('/user/resetPwd', this.form, { getAll: true }).then((res) => {
          if (res.code === 1) {
            this.tipTxt = this.$t('submitsuccess');
            this.tipShow = true;
            this.$refs.form.reset();
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.create-order {
  padding: 40px;
}

.loading {
  display: flex;
  align-items: center;
}
.title-text {
  font-weight: bold;
}
.v-icon--spin {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
